<template>
  <div class="refund-detail-rejected">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>退款详情-已拒绝</h2>
      <button @click="goBack" class="back-button">返回</button>
    </div>
    
    <!-- 订单信息区域 -->
    <div class="info-section">
      <div class="section-header">
        <h3>订单信息</h3>
      </div>
      <div class="info-grid">
        <div class="info-item">
          <label>服务编号：</label>
          <span>{{ refundDetail.applicationNo }}</span>
        </div>
        <div class="info-item">
          <label>申请状态：</label>
          <span class="status rejected">已拒绝</span>
        </div>
        <div class="info-item">
          <label>申请时间：</label>
          <span>{{ formatDateTime(refundDetail.applyTime) }}</span>
        </div>
        <div class="info-item">
          <label>用户名：</label>
          <span>{{ refundDetail.userPhone }}</span>
        </div>
        <div class="info-item">
          <label>订单编号：</label>
          <span>{{ refundDetail.orderId }}</span>
          <a href="#" class="view-link">查看</a>
        </div>
        <div class="info-item">
          <label>订单金额：</label>
          <span>¥{{ refundDetail.amount }}</span>
        </div>
        <div class="info-item">
          <label>实际退款金额：</label>
          <span>¥{{ refundDetail.amount }}</span>
        </div>
        <div class="info-item">
          <label>退款方式：</label>
          <span>{{ refundDetail.refundChannel || '退回到原支付渠道' }}</span>
        </div>
        <div class="info-item">
          <label>退款类型：</label>
          <span>{{ refundDetail.refundType || '取消订单' }}</span>
        </div>
        <div class="info-item">
          <label>退款原因：</label>
          <span>{{ refundDetail.extraInfo || '退诊' }}</span>
        </div>
      </div>
    </div>
    
    <!-- 处理信息区域 -->
    <div class="info-section">
      <div class="section-header">
        <h3>处理信息</h3>
      </div>
      <div class="info-grid">
        <div class="info-item">
          <label>处理人员：</label>
          <span>{{ processorName }}</span>
        </div>
        <div class="info-item">
          <label>处理时间：</label>
          <span>{{ formatDateTime(refundDetail.processTime) }}</span>
        </div>
        <div class="info-item">
          <label>备注：</label>
          <span>{{ refundDetail.remark || '无' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import api from '../utils/request';

const router = useRouter();
const route = useRoute();

// 退款详情数据
const refundDetail = reactive({
  id: 0,
  applicationNo: '',
  orderId: '',
  userId: 0,
  amount: 0,
  status: 2,
  statusText: '',
  applyTime: '',
  processTime: '',
  processorId: 0,
  remark: '',
  refundChannel: '',
  refundType: '',
  extraInfo: '',
  userPhone: ''
});

// 处理人员姓名
const processorName = ref('马丁');

// 获取退款详情
const loadRefundDetail = async () => {
  try {
    // 从路由参数或localStorage获取退款申请ID
    const refundId = route.params.id || localStorage.getItem('currentRefundId');
    
    if (!refundId) {
      alert('未找到退款申请ID');
      router.push('/refund-application');
      return;
    }

    console.log('加载退款详情，ID:', refundId);

    const response: any = await api.refundApplication.getDetail(parseInt(refundId as string));
    
    if (response.code === 200) {
      const data = response.data;
      Object.assign(refundDetail, data);
      
      // 根据处理人员ID获取处理人员姓名
      if (data.processorId) {
        // 这里应该调用用户服务获取处理人员姓名
        // 暂时使用默认值
        processorName.value = '马丁';
      }
      
      console.log('退款详情加载成功:', data);
    } else {
      alert('获取退款详情失败: ' + response.msg);
      router.push('/refund-application');
    }
  } catch (error) {
    console.error('获取退款详情失败:', error);
    alert('获取退款详情失败，请检查网络连接');
    router.push('/refund-application');
  }
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 格式化日期时间
const formatDateTime = (dateTime: string | null) => {
  if (!dateTime) return '-';
  try {
    const date = new Date(dateTime);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  } catch (error) {
    return dateTime;
  }
};

// 页面加载时获取数据
onMounted(() => {
  loadRefundDetail();
});
</script>

<style scoped>
.refund-detail-rejected {
  padding: 60px 80px 60px 120px;
  min-height: 100vh;
  background-color: white;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0;
  color: #333;
  font-size: 28px;
  font-weight: 600;
}

.back-button {
  padding: 10px 20px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: #40a9ff;
}

.info-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.section-header {
  background-color: #f8f9fa;
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.section-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.info-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-item label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  min-width: 100px;
}

.info-item span {
  font-size: 14px;
  color: #333;
}

.status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.status.rejected {
  background-color: #f8d7da;
  color: #721c24;
}

.view-link {
  color: #1890ff;
  text-decoration: none;
  font-size: 14px;
  margin-left: 10px;
}

.view-link:hover {
  text-decoration: underline;
}
</style> 